<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔仙个人中心</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/center.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul class="fr">
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span class="phone"></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
        <img class="fl" src="./images/logo.png" alt="">
        <ul class="fl">
            <li><a href="#">首页</a></li>
            <li><a href="#">生鲜</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">餐厨</a></li>
            <li><a href="#">电器</a></li>
            <li><a href="#">居家</a></li>
            <li><a href="#">洗护</a></li>
            <li><a href="#">孕婴</a></li>
            <li><a href="#">服装</a></li>
        </ul>
        <div class="search">
            <input class="fl" type="text" placeholder="搜一搜">
            <span class="search_icon"></span>
        </div>
        
        <div class="fl cart">
            <span class="icon">2</span>
        </div>
    </div>
    <!-- 内容 -->
     <div class="mainbody">
        <div class="wrapper content">
            <div class="left">
                <div class="user_img">
                    <img class="pic" src="./uploads/avatar_1.png" alt="">
                    <p>张小花</p>
                    <span> <img src="./images/vip_gold.png" alt="">黄金会员</span>
                </div>
                <div class="common_plane my_account">
                    <p>我的账户</p>
                    <ul>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">消息通知</a></li>
                        <li><a href="#">个人信息</a></li>
                        <li><a href="#">安全设置</a></li>
                        <li><a href="#">地址管理</a></li>
                        <li><a href="#">我的积分</a></li>
                        <li><a href="#">我的足迹</a></li>
                        <li><a href="#">邀请有礼</a></li>
                        <li><a href="#">幸运抽奖</a></li>
                    </ul>
                </div>
                <div class="common_plane pay_record">
                    <p>交易管理</p>
                    <ul>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">礼品卡</a></li>
                        <li><a href="#">评价晒单</a></li>
                        <li><a href="#">售后服务</a></li>
                    </ul>
                </div>
                <div class="common_plane interest">
                    <p>我的收藏</p>
                    <ul>
                        <li><a href="#">收藏的商品</a></li>
                        <li><a href="#">收藏的商品</a></li>
                        <li><a href="#">收藏的商品</a></li>
                    </ul>
                </div>
                <div class="common_plane help">
                    <p>帮助中心</p>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">在线客服</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="green">
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/safe.png" alt="">
                            <p>安全设置</p>
                        </a>
                        <a href="#">
                            <img src="./images/address.png" alt="">
                            <p>地址管理</p>
                        </a>
                    </div>
                    <div class="orange">
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>70</span>
                            <p>礼品卡</p>
                        </a>
                        <a href="#">
                            <span>120</span>
                            <p>积分</p>
                        </a>
                    </div>
                </div>
                <div class="plannel myorder">
                    <div class="plannel_title">
                        <p>我的订单</p>
                        <a href="#">查看全部 ></a>
                    </div>
                    <div class="goods_list">
                        <div>
                            <img src="./uploads/clothes_goods_1.jpg" alt="">
                            <div>
                                <p class="title">经典款帆布鞋男女同款帆布鞋经典款帆布鞋</p>
                                <p>颜色：<span>灰色</span>  尺码：<span>42</span>  数量：<span>1</span></p>
                            </div>
                        </div>
                        <div>
                            <p>待付款</p>
                        </div>
                        <div>
                            <p>￥<span>99.00</span></p>
                            <p>（含运费：¥<span>10.00</span>元）</p>
                            <p>在线支付</p>
                        </div>
                        <div class="actions">
                            <a href="#">立即付款</a>
                            <a href="#">查看详情</a>
                            <a href="#">取消订单</a>
                        </div>
                    </div>
                    <div class="goods_list">
                        <div>
                            <img src="./uploads/clothes_goods_1.jpg" alt="">
                            <div>
                                <p class="title">经典款帆布鞋男女同款帆布鞋经典款帆布鞋</p>
                                <p>颜色：<span>灰色</span>  尺码：<span>42</span>  数量：<span>1</span></p>
                            </div>
                        </div>
                        <div>
                            <p>待付款</p>
                        </div>
                        <div>
                            <p>￥<span>99.00</span></p>
                            <p>（含运费：¥<span>10.00</span>元）</p>
                            <p>在线支付</p>
                        </div>
                        <div class="actions">
                            <a href="#">立即付款</a>
                            <a href="#">查看详情</a>
                            <a href="#">取消订单</a>
                        </div>
                    </div>
                </div>
                <div class="plannel goods">
                    <div class="plannel_title">
                        <p>收藏的商品</p>
                        <a href="#">查看全部 ></a>
                    </div>
                    <ul class="samegoodslist">
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                    </ul>
                </div>
                <div class="plannel foot">
                    <div class="plannel_title">
                        <p>我的足迹</p>
                        <a href="#">查看全部 ></a>
                    </div>
                    <ul class="samegoodslist">
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                        <li><a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排240g/袋 4片装</p>
                            <span>¥ <span class="price">59</span></span>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
     </div>

    <!-- 公共底部 -->
    <div class="footer">
        <div class="wrapper tedian">
            <ul>
                <li>
                    <span class="icon"></span>
                    <span>价格亲民</span>
                </li>
                <li>
                    <span class="icon"></span>
                    <span>物流快捷</span>
                </li>
                <li>
                    <span class="icon"></span>
                    <span>品质新鲜</span>
                </li>
            </ul>
        </div>
        <div class="line"></div>
        <div class="wrapper link">
            <ul class="clearfix">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">配送与验收</a></li>
                <li><a href="#">商务合作</a></li>
                <li><a href="#">搜索推荐</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
</div>
</body>

</html>